<template>
  <div class="app-container" style="overflow: scroll">
    <div style="width: 1024px;margin: 0 auto">
    <el-form ref="submitParams" :model="submitParams" :rules="rules" label-width="120px">
      <el-row type="flex">
        <el-col :span="12">
          <el-form-item label="记账标识" prop="cbflag">
            <el-select style="width: 100%;" v-model="submitParams.cbflag" placeholder="记账标识">
              <el-option
                v-for="dict in dictMap.CBFLAG"
                :key="dict.value"
                :label="`${dict.value}-${dict.text}`"
                :value="dict.value"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="付款人开户行行号" prop="payerAccBrno">
            <el-input v-model="submitParams.payerAccBrno" @change="checkbankcode('payerAccBrno')"/>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label-width="20px">
            <el-button
              icon="el-icon-search"
              plain
              type="primary"
              @click="openBankBranchDialog('payerAccBrno')"
            >
              行名行号查询
            </el-button>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="24">
          <el-form-item label="付款人开户行行名" prop="payerAccBrname">
            <el-input v-model="submitParams.payerAccBrname" :disabled="true" />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row type="flex">
        <el-col :span="12">
          <el-form-item label="付款人账号" prop="payerActno">
            <el-input v-model="submitParams.payerActno" />
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="付款人名称" prop="payerName">
            <el-input v-model="submitParams.payerName" />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row type="flex">
        <el-col :span="12">
          <el-form-item label="交易合同号码" prop="txnContNo">
            <el-input v-model="submitParams.txnContNo" />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row type="flex">
        <el-col :span="12">
          <el-form-item label="买入价币种" prop="buyPriceCurcd">
            <el-input v-model="submitParams.buyPriceCurcd" :disabled="true"/>
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="买入价" prop="buyPriceAmount">
            <ht-amount-input
              v-model="submitParams.buyPriceAmount"
              placeholder="买入价"
            ></ht-amount-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row type="flex">
        <el-col :span="12">
          <el-form-item label="买入外汇币种" prop="buyNumCurcd">
            <el-select style="width: 100%;" v-model="submitParams.buyNumCurcd" placeholder="买入外汇币种">
              <el-option
                v-for="dict in dictMap.CURCD_5701"
                :key="dict.value"
                :label="`${dict.value}-${dict.text}`"
                :value="dict.value"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="买入外汇数" prop="buyNumAmount">
            <ht-amount-input
              v-model="submitParams.buyNumAmount"
              placeholder="买入外汇数"
            ></ht-amount-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row type="flex">
        <el-col :span="24">
          <el-form-item label="备注" prop="remarks">
            <el-input type="textarea" v-model="submitParams.remarks"  maxlength="256" show-word-limit/>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :offset="7" :span="12">
          <el-form-item>
            <el-button type="primary" @click="submitForm" v-loading.fullscreen.lock="loading">提 交</el-button>
            <el-button @click="refresh">重 置</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

    <bank-branch-dialog ref="bankBranchDialog" @confirm="confirmBankBranch"></bank-branch-dialog>
    </div>
    </div>

</template>

<script>
import { listPageMixin } from "@/libs/listPageMixin";
import BankBranchDialog from "@/views/components/BankBranchDialog";
import { getBankInfByBankCode } from "@/api/cnaps/common/bankInfo";
import HtAmountInput from "@/views/components/HtAmountInput";
import { mapGetters } from "vuex";
import { milliSendToDate } from "@/utils/common";
import { pvpSettlementApplyInformationEntrySave } from "@/api/cnaps/hvps/143";

export default {
  name: "ApplicationCityCommercialBankdraftEntry",
  mixins: [listPageMixin],
  components: { HtAmountInput, BankBranchDialog },
  computed: {
    ...mapGetters(["name", "globalBusData"]),
  },
  created() {
    this.$set(this.submitParams, "sender", this.globalBusData.cnapsBrno);
    this.$set(this.submitParams, "senderName", this.globalBusData.cnapsBrname);
    this.$set(this.submitParams, "dftDate", milliSendToDate(new Date()));
  },
  watch: {
    globalBusData: {
      handler(val) {
        this.$set(this.submitParams, "sender", val.cnapsBrno);
        this.$set(this.submitParams, "senderName", val.cnapsBrname);
      },
      deep: true,
      immediate: true,
    },
  },
  data() {
    return {
      // 录入参数
      submitParams: {
        cbflag:undefined,
        payerAccBrno:undefined,
        payerAccBrname:undefined,
        payerActno:undefined,
        payerName:undefined,
        txnContNo:undefined,
        buyPriceCurcd:'CNY-人民币',
        buyPriceAmount:undefined,
        buyNumCurcd:undefined,
        buyNumAmount:undefined,
        remarks:undefined,
      },

      loading: false,
      //
      searchFormDictList: ["CBFLAG","CURCD_5701"],

      rules: {
        payerAccBrno :  [{ max: 14, message: "长度最大为14位", trigger: "blur" }],
        payerAccBrname :  [{ max: 60, message: "长度最大为60位", trigger: "blur" }],
        payerActno :  [{ max: 32, message: "长度最大为32位", trigger: "blur" }],
        payerName :  [{ max: 60, message: "长度最大为60位", trigger: "blur" }],
        txnContNo : [
          { required: true, message: "请输入交易合同号码", trigger: "blur" },
          { max: 30, message: "长度最大为30位", trigger: "blur" },
        ],
        buyPriceAmount : [ { required: true, message: "请输入买入价", trigger: "blur" }],
        buyNumAmount :  [ { required: true, message: "请输入买入外汇数", trigger: "blur" }],
        remarks : [{ max: 256, message: "长度最大为256位", trigger: "blur" }],
      },
    };
  },
  mounted() {},
  methods: {
    //行名行号查询
    openBankBranchDialog(fromFlag = "") {
      this.$refs.bankBranchDialog.show(fromFlag);
    },
    /** 提交按钮 */
    submitForm: function () {
      this.$refs["submitParams"].validate((valid) => {
        if (valid) {
          this.loading = true;
          pvpSettlementApplyInformationEntrySave(this.submitParams)
            .then((response) => {
              this.$alert(`CORE_ID: ${response.result}`, "生成交易流水号", {
                confirmButtonText: "确定",
                //刷新一下查询列表 TODO
                callback: (action) => {
                },
              });
              this.refresh();
              this.loading = false;
            })
            .catch((err) => {
              this.loading = false;
            });
        }
      });
    },
    //点击重置按钮
    refresh() {
      this.resetForm("submitParams");
      console.log(this.globalBusData);
    },

    //行名行号返回
    confirmBankBranch(fromFlag, row) {
      if (fromFlag === "payerAccBrno") {
        this.$set(this.submitParams, "payerAccBrno", row.bankCode);
        this.$set(this.submitParams, "payerAccBrname", row.orgFullname);
      }
    },

    checkbankcode(fromFlag) {
      if (fromFlag === "payerAccBrno") {
        let payerAccBrno = this.submitParams.payerAccBrno;
        getBankInfByBankCode(payerAccBrno)
          .then((response) => {
            if (response.code == "S" && response.result !== null && response.result !== undefined) {
              this.$set(this.submitParams, "payerAccBrno", response.result.bankCode);
              this.$set(this.submitParams, "payerAccBrname", response.result.orgFullname);
            } else {
              this.msgError("无行名行号记录");
              this.$set(this.submitParams, "payerAccBrno", null);
              this.$set(this.submitParams, "payerAccBrname", null);
            }
          })
          .catch((err) => {
            this.$set(this.submitParams, "payerAccBrno", null);
            this.$set(this.submitParams, "payerAccBrname", null);
          });
      }
    },
  },
};
</script>
